﻿﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
%>
<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<!-- Advanced Tables -->
						<div class="panel panel-default">
							<div class="panel-heading">人员告警信息列表</div>
							<div class="panel-body">
							  	<form class="form-horizontal">
							  		<div class="form-group">
							  			<label for="vehicleLicense" class="col-md-2 control-label">车牌号</label>
							  			<div class="col-md-2">
							  				<input type="text" class="form-control" id="vehicleLicense" placeholder="车牌号">
							  			</div>
							  			<label for="personName" class="col-md-2 control-label">姓名/身份证号</label>
                                        <div class="col-md-2">
	                                        <input type="text" class="form-control" id="personName" placeholder="姓名/身份证号">
                                        </div>
							  		</div>
                                    <div class="form-group">
										<label for="startSignInTime" class="col-md-2 control-label">开始时间</label>
										<div class="col-md-2">
											<div class='input-group date' id='datetimepicker1'>
												<input type='text' class="form-control" id="startTime" name="startTime" placeholder="开始时间"/> 
													<span class="input-group-addon" style="cursor: pointer;"> 
													<span class="glyphicon glyphicon-calendar"></span>
												</span>
											</div>
										</div>
										<label for="endSignInTime" class="col-md-2 control-label">结束时间</label>
										<div class="col-md-2">
											<div class='input-group date' id='datetimepicker2'>
												<input type='text' class="form-control" id="endTime" name="endTime" placeholder="结束时间"/>
												<span class="input-group-addon"style="cursor: pointer;"> 
													<span class="glyphicon glyphicon-calendar"></span>
												</span>
											</div>
										</div>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	                                    <a type="search" onclick="load(1)" class="btn btn-primary">搜索</a>
                                    </div>
                                </form>
                                <div style="height:20px"></div>
								<div class="table-responsive">
									<table class="table table-striped table-bordered table-hover"
										id="dataTables-example">
										<thead>
											<tr>
												<th>序号</th>
												<th>车牌</th>
												<th>姓名</th>
												<th>身份证号</th>
												<th>告警描述</th>
												<th>处理人</th>
												<th>处理结果</th>
												<th>告警时间</th>
											</tr>
										</thead>
										<tbody id="tbody">
										</tbody>
									</table>
									<div style="float:right" id="page" class="tr"></div>
								</div>

							</div>
						</div>
						<!--End Advanced Tables -->
					</div>
				</div>
			</div>
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="myModalLabel"></h4>
			      </div>
			      <div class="modal-body" id="myModalBody">
			       
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
			    </div>
			  </div>
			</div>
		</div>
<script>
	$(document).ready(function() {
		var now = new Date();  
		var day = ("0" + now.getDate()).slice(-2);  
		var month = ("0" + (now.getMonth() + 1)).slice(-2);  
		var startTime = now.getFullYear()+"-"+(month)+"-"+(01) ;  
		var endDate = now.getFullYear()+"-"+(month)+"-"+(day) ;  
		
		$("#startTime").val(startTime);
		$("#endTime").val(endDate);
		
		//日期选择
	    var picker1 = $('#datetimepicker1').datetimepicker({  
	        format: 'YYYY-MM-DD',  
	        locale: moment.locale('zh-cn'),  
	        //minDate: '2016-7-1'  
	    });  
	    var picker2 = $('#datetimepicker2').datetimepicker({  
	        format: 'YYYY-MM-DD',  
	        locale: moment.locale('zh-cn')  
	    });
	    //动态设置最小值  
	    picker1.on('dp.change', function (e) {  
	        picker2.data('DateTimePicker').minDate(e.date);  
	    });  
	    //动态设置最大值  
	    picker2.on('dp.change', function (e) {  
	        picker1.data('DateTimePicker').maxDate(e.date);  
	    });
		load(1);
	});
	function load(curr) {
		var pageSize =30; //每页出现的数量
	    $.ajax({
	    	url: "<%=path %>/getPersonAlertList",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: {
	        	"curr": curr, 
	        	"pageSize": pageSize,
	        	"vehicleLicense":$("#vehicleLicense").val(),
	        	"personName":$("#personName").val(),
	        	"startTime":$("#startTime").val(),
	        	"endTime":$("#endTime").val()
	        },
	        success: function (data) {
	            var html = "";
	            $.each(data.list, function (i, item) {
	            	var n = i+1;
	                html += " <tr> " +
		                        " <td>" + n + "</td> " +
		                        " <td>" + item.vehicleLicense + "</td> " +
		                        " <td>" + item.personName + "</td> " +
		                        " <td>" + item.certificateCode + "</td> ";
		                        if(item.alertType==2){
		                        	html +=" <td><a href='#' onclick='alertCommentDetail("+item.alertComment+")'>查看详细</a></td> ";
		                        }else{
		                        	html +=" <td>" + item.alertComment + "</td> ";
		                        }
		                        html +=" <td>" + item.disposeName + "</td> " +
		                        " <td>" + item.disposeResult + "</td> " +
		                        " <td>" + item.createDate + "</td> " +
	                        " </tr>";
	            })
	            $("#tbody").html(html);
	            laypage({
	                cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
	                pages: Math.ceil(data.totalCount / 30), //通过后台拿到的总页数
	                skin: "#49afcd",
	                curr: curr || 1, //当前页
	                jump: function (obj, first) { //触发分页后的回调
	                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
	                        curr = obj.curr;
	                        load(curr);
	                    }
	                }
	            });

	        }
	    })
	}
	
	function alertCommentDetail(alertComment){
		$('#myModal').modal('toggle')
		$('#myModalLabel').html("告警详情");
		var str="";
		if(alertComment==null||alertComment==''){
			$('#myModalBody').html("数据出错了");
			return;
		}
		for(var i=0;i<alertComment.length;i++){
			str+="<div class='row'><div class='col-xs-4 text-right'><lable>任务名称:</lable></div><div class='col-xs-8'>"+alertComment[i].rwmc+"</div></div>"+
			"<div class='row'><div class='col-xs-4 text-right'><lable>案情描述:</lable></div><div class='col-xs-8'>"+alertComment[i].aqms+"</div></div>"+
			"<div class='row'><div class='col-xs-4 text-right'><lable>布控人姓名:</lable></div><div class='col-xs-8'>"+alertComment[i].bklxr+"</div></div>"+
			"<div class='row'><div class='col-xs-4 text-right'><lable>布控人身份证号:</lable></div><div class='col-xs-8'>"+alertComment[i].bklxfs+"</div></div>"+
			"<div class='row'><div class='col-xs-4 text-right'><lable>人员类别:</lable></div><div class='col-xs-8'>"+alertComment[i].rylb+"</div></div>"+
			"<div class='row'><div class='col-xs-4 text-right'><lable>处理方式:</lable></div><div class='col-xs-8'>"+alertComment[i].clfs+"</div></div>"
		}
		$('#myModalBody').html(str);
	}
</script>
